<template>
	<view class="comment-box">
		<!-- 弹窗评论框 -->
		<uni-popup ref="popup" :safe-area="false" type="bottom" class="popup-box" @maskClick="toggle(false)">
			<view class="popup-head flex-r ac">
				<text class="text-primary" @tap="toggle(false)">取消</text>
				<text class="text-bold">{{ replyData && replyData.replyCommentId ? '回复' : '留言'}}</text>
				<text class="text-primary color-blue" @tap="submitComment">发布</text>
			</view>
			<view class="popup-view flex-c bottom-ios">
				<view class="comment-input flex-c" :class="{'full': fullScreen}">
					<textarea
						v-model="commentText"
						:placeholder="replyData && replyData.replyUserName ? '回复 ' + replyData.replyUserName + '：' : '写留言'"
						ref="inputBox"
						class="textarea" 
						:focus="true"
						:fixed="true" 
						:maxlength="200"
						confirm-type="send"
						@focus="focus"
						@input="inputComment"
						@confirm="submitComment"></textarea>
					<text class="text-num" :class="{'active': textNum == 200}">{{textNum}}/200</text>
					<view class="tools-box flex-r ac">
						<image class="zoom-icon" :src="require('@/public/images/public/'+ (fullScreen ? 'lysq' : 'lyzk') +'.png')" mode="aspectFit" @touchend.prevent="fullScreen = !fullScreen" @tap="fullScreen = !fullScreen"></image>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 底部普通评论框 -->
		<view class="post-foot-comment flex-r ac jsb" @tap="popupInput">
			<view class="input-box text-secondary color-grey flex-r ac">
				<text>写留言</text>
			</view>
			<button class="comment-btn flex-r ac jc" type="default">发布</button>
		</view>
	</view>
</template>

<script>
	/**
	 * CommentInput 评论输入框
	 * @description 方案详情、讨论贴等评论输入框
	 * @property {Boolean} popup 评论框弹出状态
	 * @property {String} type = [1|3|7|8|99] 
	 *  @value 1 专家料
	 *  @value 3 晒单
	 *  @value 7 话题贴
	 *  @value 8 投票贴
	 *  @value 99 用户料
	 * @property {Number} commentType = [1|2] 评论类型
	 *  @value 1 评论
	 *  @value 2 回复
	 * @property {String} articleId 方案或讨论贴ID
	 * @property {String} expertId 方案所属专家ID
	 * @property {Object} replyData 回复时的回复对象数据
	 * @event {Function} close 评论弹窗关闭
	 * @event {Function} success 评论发布成功
	 * @example <CommentInput type="1" :articleId="articleId" :expertId="expertId"></CommentInput>
	 */
	export default {
		name: "CommentInput",
		emits: ['close', 'success'],
		props: {
			popup: {
				type: Boolean,
				default: false
			},
			type: {
				type: [String, Number],
				default: 1
			},
			commentType: {
				type: [String, Number],
				default: 1
			},
			articleId: {
				type: [String, Number],
				default: 1
			},
			expertId: {
				type: [String, Number],
				default: ''
			},
			replyData: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				fullScreen: false, //评论框是否放大
				commentText: '', //评论内容
				textNum: 0 //评论字数
			};
		},
		computed: {
			user() {//用户信息
				return this.$store.state.user
			}
		},
		watch: {
			popup(newValue, oldValue) {
				if(newValue){
					this.$refs.popup.open()
				}else{
					this.$refs.popup.close()
					this.fullScreen = false
					this.$emit('close')
				}
			},
			replyData(newValue, oldValue) {
				console.log(newValue);
				if(newValue && newValue.replyCommentId){
					//this.toggle(true);
					this.popupInput()
				}else{
					this.toggle(false);
				}
			},
		},
		methods: {
			//弹出输入框
			popupInput() {
				if(!this.$store.state.isLogin){//是否登录
					this.$CHS.goUserLogin()
				}else{
					this.toggle(true);
					// this.$CHS.checkUserLimit(2).then((result) => {//检测声望权限
					// 	if(result){
					// 		this.toggle(true);
					// 	}else{
					// 		uni.showToast({
					// 			title: '您的声望等级不足，暂无权限评论/回复',
					// 			icon: 'none'
					// 		})
					// 		this.toggle(false);
					// 	}
					// }).catch((error) => {
					// 	console.log(error);
					// })
				}
			},
			//检测是否登录
			focus() {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
				}
			},
			//切换弹窗
			toggle(status){
				console.log(status);
				if(status){
					this.$emit("update:popup", true);
				}else{
					this.$emit("update:popup", false);
				}
			},
			/* //评论输入行数变化
			lineChange(e) {
				console.log(e);
				if(e.detail.lineCount < 8){
					let height = e.detail.heightRpx - 52
					height = height > 0 ? height : 0
					this.$emit('lineChange', height)
				}else{
					let height = e.detail.heightRpx/e.detail.lineCount * 7 - 52
					height = height > 0 ? height : 0
					this.$emit('lineChange', height)
				}
			}, */
			//输入评论字数检测
			inputComment(e) {
				console.log(e.detail.value);
				this.textNum = e.detail.value.length
				if(e.detail.value.length >= 200){
					this.$nextTick(()=>{
						this.commentText = e.detail.value.substr(0, 200)
					})
					uni.showToast({
						title: '最多输入200个字符',
						icon: 'none',
					})
				}
			},
			//提交评论
			submitComment() {
				if(this.commentText.trim() != ''){
					if(this.isSubmit){
						return false
					}
					this.isSubmit = true
					this.$http.post({
						url: '/api/chtyUserComment/message',
						data: {
							commentType: this.commentType,
							content: this.commentText.trim(),
							expertId: this.expertId,
							msgId: this.articleId,
							type: this.type,
							userId: this.user.userId,
							...this.replyData
						},
					}).then(data => {
						console.log(data);
						if(data.success){
							if(data.result){
								this.$ShowToast({text: data.message || '发布成功', type: 1, time: 2})
							}else{
								this.$ShowToast({text: data.message || '发布成功，内容审核中', type: 1, time: 2})
							}
							this.$emit('success', data.result)
							this.commentText = ''
							this.toggle(false)
						}else{
							uni.showToast({
								title: data.message || '发布失败，请稍后重试',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
					}).finally(()=>{
						this.isSubmit = false
					})
				}else{
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-box{
		z-index: 997;
		/deep/ .bottom{
			max-width: $max-width;
			margin: $pc-margin;
		}
		.popup-head{
			height: 96rpx;
			padding: 0 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			border-bottom: 1rpx solid #EDEDED;
			.text-bold{
				flex: 2;
				text-align: center;
				font-size: 36rpx;
			}
			.close-icon{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.popup-view{
			padding: 0 20rpx;
			.comment-input{
				min-height: 320rpx;
				height: 320rpx;
				&.full{
					height: calc(var(--safe-height) - 96rpx - 88rpx - 100rpx);
				}
				.textarea{
					width: 100%;
					height: calc(100% - 68rpx - 46rpx);
					font-size: 28rpx;
					line-height: 36rpx;
					padding: 20rpx 0;
					border: none;
					word-wrap: break-word;
					word-break: break-all;
					outline: none;
					overflow-y: auto;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					box-sizing: border-box;
					/deep/ .textarea-placeholder{
						font-size: 26rpx;
						color: #999999;
					}
				}
				.text-num{
					text-align: right;
					font-size: 26rpx;
					height: 26rpx;
					color: #999999;
					margin-bottom: 20rpx;
				}
				.tools-box{
					justify-content: flex-end;
					padding-bottom: 20rpx;
					.zoom-icon{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.bottom-ios{
			background-color: #fff;
		}
	}
	.post-foot-comment{
		height: 96rpx;
		padding: 12rpx 20rpx;
		border-top: 1rpx solid #F5F5F5;
		box-sizing: border-box;
		background-color: #fff;
		.input-box{
			flex: 2;
			width: 540rpx;
			height: 72rpx;
			padding: 0 30rpx;
			background: #F2F5FA;
			border-radius: 36rpx;
			box-sizing: border-box;
			margin-right: 20rpx;
		}
		.comment-btn{
			height: 72rpx;
			background: #0055FF;
			border-radius: 36rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			margin: 0;
			padding: 0 49rpx;
			box-sizing: border-box;
		}
	}
</style>